<template>
    <div>
        <supertable class="bannertable" :tableData="tableData" :headerData="headerData" :isoperation="false"
            :ispagination="false" :height="1000">
            <template v-slot:idFile="row">
                <div>
                    <el-image :src="row.row.idFile"></el-image>
                </div>
            </template>
            <template v-slot:formSolt>
                <div>
                    <el-input style="width:400px;font-size: 12px;" placeholder="姓名" v-model="input" clearable
                        class="bannerinput">
                    </el-input>
                    <el-input style="width:400px;font-size: 12px;" placeholder="手机号" v-model="input1" clearable
                        class="bannerinput">
                    </el-input>
                    <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
                        start-placeholder="发布起始日期" end-placeholder="发布截止日期" :picker-options="pickerOptions">
                    </el-date-picker>
                    <!-- <el-button type="success" size="mini" icon="el-icon-search" @click="InvitationManagementInterfaceFn()">搜索</el-button> -->
                    <el-button type="success" size="mini" icon="el-icon-search"
                        @click="InvitationManagementInterfaceFn()">搜索</el-button>
                    <el-button type="primary" size="mini" icon="el-icon-refresh" @click="reset()">重置</el-button>
                </div>
            </template>

        </supertable>
        <!-- 分页 -->
        <div>
            <el-pagination :page-sizes="[10, 20, 50, 100, 500]" :pager-count="5" :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="sizeChange"
                @current-change="currentChange">
            </el-pagination>
        </div>
    </div>
</template>
<script>
//引入组件
import supertable from "@/components/supertable";
import { InvitationManagementInterface } from "@/api/InvitationManagement";
export default {
    name: "ArticleManagement",
    data() {
        return {
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            pages: 1,
            limit: 20,
            total: 0,
            value1: '',
            value2: '',
            input: "",
            input1:"",
            dialogVisible: false,
            headerData: [
                {
                    prop: "ID",
                    label: "ID",
                    width: "180"
                },
                {
                    prop: "userName",
                    label: "联系人",
                    width: "180"
                },
                {
                    prop: "mobile",
                    label: "联系手机",
                    width: "180"
                },
                {
                    prop: "email",
                    label: "email",
                    width: "180"
                },
                {
                    prop: "createTime",
                    label: "邀约时间",
                    width: "180",
                },
                {
                    prop: "remark",
                    label: "备注",
                    width: "180",
                }
            ],
            tableData: [],
        };
    },
    async mounted() {
        let _self = this;
        await _self.InvitationManagementInterfaceFn();
    },
    methods: {

        //重置
        reset() {
            let _self = this;
            _self.input = "";
            _self.InvitationManagementInterfaceFn();
        },


        //id title type page param idFile
        // 商品列表数据
        async InvitationManagementInterfaceFn() {
            let _self = this;
            _self.tableData = [];
            let data = {
                name: _self.input,
                limit: _self.limit,
                pages: _self.pages

            };
            await InvitationManagementInterface(data).then((res) => {
                console.log(res);
                let { records } = res.data;
                if (res.code == 20000) {
                    _self.total = res.data.total;

                    for (let item of records) {
                        _self.tableData.push({
                            ID: item.id,
                            userName: item.userName,
                            createTime: item.createTime,
                            mobile: item.mobile,
                            email: item.email,
                            remark: item.remark,
                            limit: data.limit,
                            pages: data.pages,
                            total: data.total
                        });
                    }
                }
            });
        },
        // 分页
        sizeChange(val) {
            let _self = this;
            _self.limit = val;
            _self.InvitationManagementInterfaceFn();
        },
        currentChange(val) {
            let _self = this;
            _self.pages = val;
            _self.InvitationManagementInterfaceFn();
        }

    },
    // component:{组件定义名字：该组件的路径}
    components: {
        supertable
    }
};
</script>
<style scoped lang="">
  .bannerinput {
    margin: 10px 10px;
    width: 400px;
  }
  .bannertable {
    margin: 10px;
  }
  .bannerBtn {  
    margin: 10px;
  }
  .el-image{
    width:200px;
    height: 100px;
  }
  </style>
  </style>
  